<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="jquery-1.10.2.js"></script>
    <link href="jquery-ui-1.9.0.custom.css" rel="stylesheet" />      
    <script src="jquery-ui-1.9.0.custom.js" type="text/javascript"></script>
    <script src="go.js" type="text/javascript"></script>
    <script src="wfedit.js" type="text/javascript"></script>
    <style>
    </style>
</head>
     
<body>
    <div id="sample">
        <div style="width:100%; white-space:nowrap;">
            <span style="display: inline-block; vertical-align: top; padding: 5px; width:100px">
               <div id="myPalette" style="border: solid 1px gray; height: 720px"></div>
            </span>
            <span style="display: inline-block; vertical-align: top; padding: 5px; width:90%">
                <div style="margin-bottom: 10px;">
                    <?php if(@$wfuid != ""){?>
                    <button id="SaveButton" onclick="save()">保存流程图</button>
                    <?php }?>
                </div>      
                <div id="myDiagram" style="border: solid 1px gray; height: 720px"></div>
            </span>
        </div>
        <form id="theForm" name="theForm" method="post" action="<?= site_url('config/workflow/wf_flow_edit/flow_chart_save') ?>">
            <div style="display:none">
                <input type="hidden" id="wfuid" name="wfuid" value="f167a71d-4d8f-bdae-0a02-a485d8e8ca4e">
                <textarea id="mySavedModel" name="mySavedModel" style="width:100%;height:300px">{"class":"go.GraphLinksModel","linkFromPortIdProperty":"fromPort","linkToPortIdProperty":"toPort","nodeDataArray":[{"key":"1","id":"1","text":"\u5f00\u59cb","category":"Start","loc":"0 0"},{"key":"5","id":"5","text":"\u73af\u82821","loc":"3.552713678800501e-15 73.00000000000001","category":"split"},{"key":"6","id":"6","text":"\u73af\u82822","loc":"97 139.99999999999997"},{"key":"7","id":"7","text":"\u73af\u82823","loc":"97 206.00000000000009"},{"key":"8","id":"8","text":"\u73af\u82824","loc":"-167.99999999999997 194.99999999999994"},{"key":"9","id":"9","text":"\u73af\u82825","loc":"0 292.0000000000001","category":"join"},{"key":"10","id":"10","text":"\u73af\u82826","loc":"0 360"},{"key":"4","id":"4","text":"\u7ed3\u675f","category":"End","loc":"0 439.9999999999999"}],"linkDataArray":[{"from":1,"to":"5","fromPort":"B","toPort":"T","condition_type":"true","condition_value":"true","role_type":"2","role_value":"","points":[0,21.808122679245,0,31.808122679245,0,39.254061339622,0,39.254061339622,0,46.7,0,56.7]},{"from":"5","to":"6","fromPort":"R","toPort":"T","condition_type":"config","condition_value":"","role_type":"2","role_value":"","points":[27.15998840332,73,37.15998840332,73,97,73,97,93.35,97,113.7,97,123.7]},{"from":"6","to":"7","fromPort":"B","toPort":"T","condition_type":"true","condition_value":"true","role_type":"2","role_value":"","points":[97,156.3,97,166.3,97,173,97,173,97,179.7,97,189.7]},{"from":"7","to":"9","fromPort":"B","toPort":"T","condition_type":"true","condition_value":"true","role_type":"2","role_value":"","points":[97,222.4377243042,97,232.4377243042,97,249,0,249,0,265.5622756958,0,275.5622756958]},{"from":"9","to":"10","fromPort":"B","toPort":"T","condition_type":"true","condition_value":"true","role_type":"2","role_value":"","points":[0,308.4377243042,0,318.4377243042,0,326,0,326,0,333.5622756958,0,343.5622756958]},{"from":"10","to":"4","fromPort":"B","toPort":"T","condition_type":"true","condition_value":"true","role_type":"","role_value":"","points":[0,376.4377243042,0,386.4377243042,0,397.31480081248,0,397.31480081248,0,408.19187732076,0,418.19187732076]},{"from":"5","to":"8","fromPort":"L","toPort":"T","condition_type":"true","condition_value":"true","role_type":"2","role_value":"","points":[-27.23657989502,73,-37.23657989502,73,-168,73,-168,120.7811378479,-168,168.5622756958,-168,178.5622756958]},{"from":"8","to":"9","fromPort":"B","toPort":"T","condition_type":"true","condition_value":"true","role_type":"2","role_value":"","points":[-168,211.4377243042,-168,221.4377243042,-168,243.5,0,243.5,0,265.5622756958,0,275.5622756958]}]}
                </textarea>
            </div>
        </form>
    </div>
    <div id="dialog_div"></div>
    <div id="dialog_node"></div>
</body>
    <script id="code">
        function init() {
            var $go = go.GraphObject.make; // for conciseness in defining templates
 
            myDiagram =$go(go.Diagram, "myDiagram",{
                initialContentAlignment: go.Spot.Center,
                allowDrop: true, // must be true to accept drops from the Palette
                "LinkDrawn": showLinkLabel, // this DiagramEvent listener is defined below
                "LinkRelinked": showLinkLabel,
                "animationManager.duration": 800, // slightly longer than default (600ms) animation
                "undoManager.isEnabled": true // enable undo & redo
            });
 
            // when the document is modified, add a "*" to the title and enable the "Save" button
            myDiagram.addDiagramListener("Modified", function(e) {
                var button = document.getElementById("SaveButton");
                if (button) button.disabled = !myDiagram.isModified;
                var idx = document.title.indexOf("*");
                if (myDiagram.isModified) {
                    if (idx < 0) document.title += "*";
                } else {
                    if (idx >= 0) document.title = document.title.substr(0, idx);
                }
            });
 
            // helper definitions for node templates
 
            function nodeStyle() {
                return [
                // The Node.location comes from the "loc" property of the node data,
                // converted by the Point.parse static method.
                // If the Node.location is changed, it updates the "loc" property of the node data,
                // converting back using the Point.stringify static method.
                new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), {
                    // the Node.location is at the center of each node
                    locationSpot: go.Spot.Center,
                    //isShadowed: true,
                    //shadowColor: "#888",
                    // handle mouse enter/leave events to show/hide the ports
                    mouseEnter: function(e, obj) {
                        showPorts(obj.part, true);
                    },
                    mouseLeave: function(e, obj) {
                        showPorts(obj.part, false);
                    }
                }];
            }
 
            // when a node is double-clicked, add a child to it
 
            function nodeDoubleClick(e, obj) {
                var clicked = obj.part;
                if (clicked !== null) {
                    var thisemp = clicked.data;
                    node_edit($("#wfuid").val(), thisemp.key, thisemp.text);
                }
            }
            // when a node is link-clicked, add a child to it
 
            function linkDoubleClick(e, obj) {
                var clicked = obj.part;
                if (clicked !== null) {
                    var thisemp = clicked.data;
                    //console.log(thisemp);
                    link_edit($("#wfuid").val(), thisemp.from, thisemp.to, thisemp.condition_type, thisemp.condition_value);
                }
            }
 
            // Define a function for creating a "port" that is normally transparent.
            // The "name" is used as the GraphObject.portId, the "spot" is used to control how links connect
            // and where the port is positioned on the node, and the boolean "output" and "input" arguments
            // control whether the user can draw links from or to the port.
 
            function makePort(name, spot, output, input) {
                // the port is basically just a small circle that has a white stroke when it is made visible
                return $go(go.Shape, "Circle", {
                    fill: "transparent",
                    stroke: null, // this is changed to "white" in the showPorts function
                    desiredSize: new go.Size(8, 8),
                    alignment: spot,
                    alignmentFocus: spot, // align the port on the main Shape
                    portId: name, // declare this object to be a "port"
                    fromSpot: spot,
                    toSpot: spot, // declare where links may connect at this port
                    fromLinkable: output,
                    toLinkable: input, // declare whether the user may draw links to/from here
                    cursor: "pointer" // show a different cursor to indicate potential link point
                });
            }
 
            // define the Node templates for regular nodes
 
            var lightText = 'whitesmoke';
 
            myDiagram.nodeTemplateMap.add("", // the default category
            $go(go.Node, "Spot", nodeStyle(), {
                doubleClick: nodeDoubleClick
            },
            // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
            $go(go.Panel, "Auto",
                $go(go.Shape, "Rectangle", {
                fill: "#00A9C9",
                stroke: null
            },
                new go.Binding("figure", "figure")),
                $go(go.TextBlock, {
                font: "bold 11pt Helvetica, Arial, sans-serif",
                stroke: lightText,
                margin: 8,
                maxSize: new go.Size(160, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: false
            },
                new go.Binding("text").makeTwoWay())),
            // four named ports, one on each side:
            makePort("T", go.Spot.Top, false, true),
                makePort("L", go.Spot.Left, true, true),
                makePort("R", go.Spot.Right, true, true),
                makePort("B", go.Spot.Bottom, true, false)));
 
            myDiagram.nodeTemplateMap.add("split", // the default category
            $go(go.Node, "Spot", nodeStyle(), {
                doubleClick: nodeDoubleClick
            },
            // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
            $go(go.Panel, "Auto",
                $go(go.Shape, "Rectangle", {
                fill: "#008A00",
                stroke: null
            },
                new go.Binding("figure", "figure")),
                $go(go.TextBlock, {
                font: "bold 11pt Helvetica, Arial, sans-serif",
                stroke: lightText,
                margin: 8,
                maxSize: new go.Size(160, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: false
            },
                new go.Binding("text").makeTwoWay())),
            // four named ports, one on each side:
            makePort("T", go.Spot.Top, false, true),
                makePort("L", go.Spot.Left, true, true),
                makePort("R", go.Spot.Right, true, true),
                makePort("B", go.Spot.Bottom, true, false)));
            myDiagram.nodeTemplateMap.add("join", // the default category
            $go(go.Node, "Spot", nodeStyle(), {
                doubleClick: nodeDoubleClick
            },
            // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
            $go(go.Panel, "Auto",
                $go(go.Shape, "Rectangle", {
                fill: "#AC193D",
                stroke: null
            },
                new go.Binding("figure", "figure")),
                $go(go.TextBlock, {
                font: "bold 11pt Helvetica, Arial, sans-serif",
                stroke: lightText,
                margin: 8,
                maxSize: new go.Size(160, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: false
            },
                new go.Binding("text").makeTwoWay())),
            // four named ports, one on each side:
            makePort("T", go.Spot.Top, false, true),
                makePort("L", go.Spot.Left, true, true),
                makePort("R", go.Spot.Right, true, true),
                makePort("B", go.Spot.Bottom, true, false)));
 
            myDiagram.nodeTemplateMap.add("Start",
                $go(go.Node, "Spot", nodeStyle(),
                $go(go.Panel, "Auto",
                $go(go.Shape, "Circle", {
                minSize: new go.Size(40, 40),
                fill: "#79C900",
                stroke: null
            }),
                $go(go.TextBlock, "Start", {
                font: "bold 11pt Helvetica, Arial, sans-serif",
                stroke: lightText
            },
                new go.Binding("text"))),
            // three named ports, one on each side except the top, all output only:
            makePort("L", go.Spot.Left, true, false),
                makePort("R", go.Spot.Right, true, false),
                makePort("B", go.Spot.Bottom, true, false)));
 
            myDiagram.nodeTemplateMap.add("End",
                $go(go.Node, "Spot", nodeStyle(),
                $go(go.Panel, "Auto",
                $go(go.Shape, "Circle", {
                minSize: new go.Size(40, 40),
                fill: "#DC3C00",
                stroke: null
            }),
                $go(go.TextBlock, "End", {
                font: "bold 11pt Helvetica, Arial, sans-serif",
                stroke: lightText
            },
                new go.Binding("text"))),
            // three named ports, one on each side except the bottom, all input only:
            makePort("T", go.Spot.Top, false, true),
                makePort("L", go.Spot.Left, false, true),
                makePort("R", go.Spot.Right, false, true)));
 
            myDiagram.nodeTemplateMap.add("Comment",
                $go(go.Node, "Auto", nodeStyle(),
                $go(go.Shape, "File", {
                fill: "#EFFAB4",
                stroke: null
            }),
                $go(go.TextBlock, {
                margin: 5,
                maxSize: new go.Size(200, NaN),
                wrap: go.TextBlock.WrapFit,
                textAlign: "center",
                editable: true,
                font: "bold 12pt Helvetica, Arial, sans-serif",
                stroke: '#454545'
            },
                new go.Binding("text").makeTwoWay())
            // no ports, because no links are allowed to connect with a comment
            ));
 
 
            // replace the default Link template in the linkTemplateMap
            myDiagram.linkTemplate =
                $go(go.Link, // the whole link panel
            {
                routing: go.Link.AvoidsNodes,
                curve: go.Link.JumpOver,
                corner: 5,
                toShortLength: 4,
                relinkableFrom: true,
                relinkableTo: true,
                reshapable: true,
                resegmentable: true,
                // mouse-overs subtly highlight links:
                mouseEnter: function(e, link) {
                    link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
                },
                mouseLeave: function(e, link) {
                    link.findObject("HIGHLIGHT").stroke = "transparent";
                }
            }, {
                doubleClick: linkDoubleClick
            },
                new go.Binding("points").makeTwoWay(),
                $go(go.Shape, // the highlight shape, normally transparent
            {
                isPanelMain: true,
                strokeWidth: 8,
                stroke: "transparent",
                name: "HIGHLIGHT"
            }),
                $go(go.Shape, // the link path shape
            {
                isPanelMain: true,
                stroke: "gray",
                strokeWidth: 2
            }),
                $go(go.Shape, // the arrowhead
            {
                toArrow: "standard",
                stroke: null,
                fill: "gray"
            }),
                $go(go.Panel, "Auto", // the link label, normally not visible
            {
                visible: false,
                name: "LABEL",
                segmentIndex: 2,
                segmentFraction: 0.5
            },
                new go.Binding("visible", "visible").makeTwoWay(),
                $go(go.Shape, "RoundedRectangle", // the label shape
            {
                fill: "#F8F8F8",
                stroke: null
            }),
                $go(go.TextBlock, "Yes", // the label
            {
                textAlign: "center",
                font: "10pt helvetica, arial, sans-serif",
                stroke: "#333333",
                editable: true
            },
                new go.Binding("text", "text").makeTwoWay())));
 
            // Make link labels visible if coming out of a "conditional" node.
            // This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents.
 
            function showLinkLabel(e) {
                var label = e.subject.findObject("LABEL");
                if (label !== null) label.visible = (e.subject.fromNode.data.figure === "Diamond");
            }
 
            // temporary links used by LinkingTool and RelinkingTool are also orthogonal:
            myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
            myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;
 
            load(); // load an initial diagram from some JSON text
 
            // initialize the Palette that is on the left side of the page
            myPalette =
                $go(go.Palette, "myPalette", // must name or refer to the DIV HTML element
            {
                "animationManager.duration": 800, // slightly longer than default (600ms) animation
                nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
                model: new go.GraphLinksModel([ // specify the contents of the Palette
                    {
                        category: "Start",
                        text: "开始"
                    }, {
                        text: "审批节点"
                    }, {
                        category: "split",
                        text: "拆分节点"
                    }, {
                        category: "join",
                        text: "合并节点"
                    }, {
                        category: "End",
                        text: "结束"
                    }, {
                        category: "Comment",
                        text: "注释"
                    }
 
                ])
            });
 
        }
 
         // Make all ports on a node visible when the mouse is over the node
 
        function showPorts(node, show) {
            var diagram = node.diagram;
            if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
            node.ports.each(function(port) {
                port.stroke = (show ? "white" : null);
            });
        }
 
 
         // Show the diagram's model in JSON format that the user may edit
 
        function save() {
            document.getElementById("mySavedModel").value = myDiagram.model.toJson();
            myDiagram.isModified = false;
            $('#theForm').ajaxSubmit({
                dataType: 'json',
                success: function(json) {
                    if (json.status == 'success') {
                        layer.alert('保存成功', {
                            icon: 1
                        });
                    } else {
                        show_message(json.msg);
                    }
                }
            });
        } 
        function load() {
            myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
        }
        init();
    </script>
 
</html>